<!-- 注册页面 -->
<template>
  <div id="register">
    <div class="register-body">
      <div class="container">
        <div class="container-header">
          <span>用户注册</span>
        </div>
        <div class="container-body">
          <el-input v-model="user.userName"
                    class="input"
                    placeholder="请输入用户名"
                    clearable />
          <el-input v-model="user.userPwd"
                    class="input"
                    type="password"
                    placeholder="请输入密码" />
          <el-input v-model="user.userPwd2"
                    class="input"
                    type="password"
                    placeholder="请再次输入密码" />
          <el-input v-model="user.userPhone"
                    class="input"
                    type="tel"
                    placeholder="请输入手机号码" />
          <el-input v-model="user.smsCode"
                    class="input phone-code"
                    size="small"
                    placeholder="请输入手机验证码" />
          <el-button size="small"
                     @click="getCode">
            {{ computedTime ? `已发送(${computedTime}s) ` : "发送验证码" }}
          </el-button>
          <div class="goregister">
            <el-button @click="register">
              立即注册
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { registerUser } from '@/api/useroperation';
  import { sendMessage } from '@/api/phone';

  export default {
    name: 'register',
    data() {
      return {
        user: {
          userName: '',
          userPwd: '',
          userPwd2: '',
          userPhone: null,
          smsCode: '',
        },
        computedTime: null, // 倒计时
        intervalId: null, // 验证码定时器
      };
    },
    methods: {
      getCode() {
        // 如果当前没有计时
        if (!this.computedTime) {
          // 启动计时
          this.computedTime = 60;
          this.intervalId = setInterval(() => {
            this.computedTime--;
            if (this.computedTime <= 0) {
              clearInterval(this.intervalId);
            }
          }, 1000);
          // 发ajax请求, 向手机号发验证码
          const { userPhone } = this.user;
          sendMessage({ userPhone });
          this.$message.success('验证码发送成功，请注意查看手机');
        }
      },
      register() {
        const {
          userName, userPwd, userPwd2, userPhone, smsCode,
        } = this.user;
        if (userName.length > 8 || userName.length < 3) {
          this.$message.error('用户名长度需为3~8位!');
          return;
        }
        if (userPwd.length > 12 || userPwd.length < 8) {
          this.$message.error('密码长度需为8~12位!');
          return;
        }
        if (userPwd != userPwd2) {
          this.$message.error('两次密码不一致!');
          return;
        }
        if (!/^\d{11}$/.test(userPhone)) {
          this.$message.error('手机号码格式不正确!');
          return;
        }
        if (!smsCode) {
          this.$message.error('验证码不为空!');
          return;
        }
        const userStr = {
          userName, userPwd, userPhone,
        };
        registerUser({ userStr, smsCode }).then(data => {
          if (data.success) {
            this.$message.success('注册成功，正在前往登录界面');
            this.$router.push('/login');
          } else {
            this.$message.error(data.errMsg);
          }
        });
      },
    },
  };
</script>
<style lang='scss' scoped>
#register {
  height: 490px;
  background: url("../assets/images/register.jpg") no-repeat top center;
  .register-body {
    width: 12rem;
    margin: 0 auto;
    position: relative;
    .container {
      position: absolute;
      width: 3.6rem;
      top: 0.6rem;
      right: 1rem;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
      .container-header {
        width: 2.7rem;
        font-size: 0.22rem;
        height: 0.5rem;
        line-height: 0.5rem;
        letter-spacing: 0.03rem;
        margin: 0.1rem auto;
        text-align: center;
        color: #ff651b;
        border-bottom: 2px solid #ff651b;
      }
      .container-body {
        width: 2.7rem;
        margin: 0 auto;
        .input {
          margin-bottom: 0.15rem;
        }
        .phone-code {
          width: 1.5rem;
          margin-right: 0.1rem;
        }
        .goregister {
          margin-bottom: 0.2rem;
          button {
            width: 2.7rem;
            font-size: 0.18rem;
            font-weight: bold;
            color: #fff;
            background: #ff651b;
          }
        }
      }
    }
  }
}
</style>
